<template>
	<view>
		<navbar :title="titles" left="arrow-left">
			<view>
				<button size="mini" type="primary" style="margin: 10px 0 0 0 ;" @click="submit">{{btn}}</button>
			</view>
		</navbar>
		<input type="text" style="line-height: 50px;padding: 5px;background-color: white;" placeholder="请输入文档标题"
			v-model="title">
		<u-divider text="正文部分" style="margin: 0;background-color: white;"></u-divider>
		<view class="example4">
			<view class="editor" style="height: 100%;">
				<sp-editor editorId="editor" :toolbar-config="toolbarConfig" @input="inputOver" @upinImage="upinImage"
					@init="initEditor"></sp-editor>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	const db = uniCloud.database();
	export default {
		data() {
			return {
				title: '',
				content: '',
				btn: "保存",
				titles: "创建文档",
				id: null,
				up: null,
				editorIns: null,
				toolbarConfig: {
					excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
					iconSize: '20px',
					iconColumns: 10
				},
				content: ''
			}
		},
		onLoad(op) {
			if (op.id == null) {
				this.up = op.up
				this.titles = "创建文档"
				this.btn = "保存"
			} else {
				uni.showLoading({
					title: '内容加载中'
				});
				this.id = op.id
				this.titles = "修改文档"
				this.btn = "修改"
				this.get(op.id)
			}
		},
		methods: {
			get(id) {
				db.collection("item").where({
					_id: id
				}).get({
					getOne: true
				}).then((res) => {
					if (res.result.data) {
						this.title = res.result.data.title
						this.content = res.result.data.content
						setTimeout(() => {
							this.preRender()
							uni.hideLoading()
						}, 1000)
					}
				});
			},
			set() {
				console.log(this.content.html);
				db.collection("item").where({
					_id: this.id
				}).update({
					title: this.title,
					content: this.content.html,
				}).then(res => {
					uni.$emit("updateFile", this.id)
					this.message("修改成功")
				})
			},
			add() {
				console.log(this.content.html);
				db.collection("item").add({
					up: this.up,
					time: new Date(),
					weight: 6,
					user_id: this.user_id,
					title: this.title,
					content: this.content.html,
					type: 'document',
					openup: "document"
				}).then((dbRes) => {
					uni.$emit("addFile", dbRes.result.id)
					this.message("创建成功").then(() => {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					})
				})
			},
			submit() {
				if (this.title.length == 0) {
					this.message("标题为空", "error")
					return
				}
				if (this.btn == '保存') {
					this.add()
				} else {
					this.set()
				}
			},
			inputOver(e) {
				this.content = e
			},
			initEditor(editor) {
				this.editorIns = editor // 保存编辑器实例
				// this.preRender()
			},
			preRender() {
				// 初始化编辑器内容
				this.editorIns.setContents({
					html: this.content
				})
			},
			upinImage(tempFiles, editorCtx) {
				if (store.state.userInfo.vip < new Date().getTime()) {
					this.message("该功能为会员专属", "error")
					this.goPage("pay")
					return
				}
				this.uploadFile(tempFiles[0].path, function(res) {
					console.log(res);
					editorCtx.insertImage({
						src: res,
						width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
						success: function() {}
					})
				})
			},
			exportHtml(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.example4 {
		box-sizing: border-box;
		background-color: white;

		.datalist {
			display: flex;
			justify-content: space-between;
		}
	}
</style>